<template>
  <div id="app">
    <div class="left">
      <div class="left_container">
        <el-menu default-active="1" class="el-menu-vertical-demo"
                 @open="handleOpen" @close="handleClose"
                 v-bind:router="true"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                 :defaultOpeneds=open_list>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="Echart">echart</el-menu-item>
              <el-menu-item index="Form">form</el-menu-item>
              <el-menu-item index="/">Go to Hello World</el-menu-item>
              <el-menu-item index="/SelectForm">Go to SelectForm</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="Echart">echart</el-menu-item>
              <el-menu-item index="Form">form</el-menu-item>
              <el-menu-item index="/">Go to Hello World</el-menu-item>
              <el-menu-item index="/SelectForm">Go to SelectForm</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div class="right">
      <router-view class="router"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data: function () {
      return {
        msg: 'hello',
        //默认展开的菜单项
        open_list: ['1', '2']
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
  /*div {*/
  /*overflow: auto;*/
  /*}*/

  .left {
    width: 220px;
    background: #545c64;
    position: fixed;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  /*滚动条样式*/
  .left::-webkit-scrollbar { /*滚动条整体样式*/
    width: 0; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }

  .left_container::-webkit-scrollbar { /*滚动条整体样式*/
    width: 0; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }

  .right {
    width: 100%;
    margin-left: 220px;
  }

  .router {
    flex: 1;
  }

  #app {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
  }
</style>
